<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>1</div>
    <div>2</div>
</body>
</html>
<!-- 
    1.内部的盒子会在垂直方向，一个接一个地放置 - 块级元素的特点
    2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 - margin的bug
    3.每个元素的margin-left的左边， 与包含块border-left的左边相接触 - margin 只有和包含框接触时候才可以设置属性值
    4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素 - 色块

    5.BFC的区域不会与浮动盒子重叠 - 后台常见布局(两栏布局、三栏布局(双飞翼布局))

 -->